<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .pop {
        display: block;
        visibility: visible;
        position: fixed;
        z-index: 9999;
        left: 50%;
        top: 50%;
        width: 530px;
        height: 254px;
        margin-top: -127px;
        margin-left: -265px;
        background: url(./images/login.webp) no-repeat;
      }

      .pop2 {
        display: block;
        visibility: visible;
        position: fixed;
        /* z-index: 9999; */
        left: 50%;
        top: 50%;
        width: 530px;
        height: 254px;
        margin-top: -127px;
        margin-left: -265px;
        background-color: rgb(168, 165, 165);
      }

      .close {
        position: absolute;
        right: 0;
        top: 0;
        width: 40px;
        height: 40px;
      }
    </style>
  </head>

  <body>
    <div class="pop">
      <a href="javascript:;" class="close"></a>
    </div>
    <div class="pop2">
      <div>
        <a href="javascript:;" class="close">
          <span
            class="span"
            style="
              width: 130px;
              height: 25px;
              text-align: center;
              color: aliceblue;
              background-color: rgb(109, 133, 145);
              float: right;
              border-radius: 10px;
            "
            >点击我有惊喜😁</span
          >
        </a>
      </div>

      <a href="javascript:;" class="close"></a>
    </div>
  </body>
</html>
<script>
  // 点击关闭按钮可以关 闭父盒子
  // 获取父盒子
  const pop = document.querySelector(".pop");
  const pop2 = document.querySelector(".pop2");
  const span = document.querySelector(".span ");
  // 1. 事件源是谁? => a 标签
  const a = document.querySelector(".close");

  // 2. 注册事件
  a.addEventListener("click", function () {
    // 3.关闭父亲盒子div--display:none属性
    pop.style.display = "none";
  });

  span.addEventListener("click", function () {
    // 3.关闭父亲盒子div--display:none属性
    pop.style.display = "block";
  });
  // 3. 关闭父盒子 主要利用 display: none
</script>
